<template>
	<view class="page-box">
		<Tabbar :current="'0'"></Tabbar>

		<uni-cusTitle title='玩遍溧水' :isIcon='false' color='#000' :style="'margin-top:'+top/2+'px'"></uni-cusTitle>
		<view class="bg-box">
			<image :src="`${staticUrl}big_bgimg.png`" mode="widthFix"></image>
		</view>

		<view class="content-box">
			<!-- 轮播 -->
			<view class="lunbo-box" v-if="swiperList.length>0">
				<uni-con-swiper :list='swiperList'></uni-con-swiper>
			</view>

			<!-- 地图 -->
			<view class="map-box" @click="goToMap" >
				<image class="map-img" :src="`${staticUrl}index/cate01.png`"></image>

				<image class="more-box" :src="`${staticUrl}mine/more.png`" @click="navTap('/pages/ditu/ditu')"></image>
				<view class="map-pos">
					<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
						:markers="covers" @markertap='markTap'>
					</map>
				</view>
			</view>

			<!-- 菜单 -->
			<view class="menu-box">
				<view @click="navTap('/pages/eat/eat')">
					<image :src="`../../static/xinz/gou-icon.png`" mode="aspectFill"></image>
					<view class="names">
						购在溧水
					</view>
				</view>
				<view @click="navTap('/pages/live/live')">
					<image :src="`../../static/xinz/ci-icon.png`" mode="aspectFill"></image>
					<view class="names">
						吃在溧水
					</view>
				</view>
				<view @click="navTap('/pages/you/you')">
					<image :src="`../../static/xinz/zhu-icon.png`" mode="aspectFill"></image>
					<view class="names">
						住在溧水
					</view>
				</view>
				<view @click="navTap('/pages/shop/shop')">
					<image :src="`../../static/xinz/you-icon.png`" mode="aspectFill"></image>
					<view class="names">
						游在溧水
					</view>
				</view>
				<!-- <view class="item" @click="goToOtherApp" style="position: relative;">
					<view style="width: 72rpx;height: 72rpx;background: #fff;position: absolute;top: -10rpx;border-radius: 16rpx;"></view>
					<view>溧水一码通</view>
				</view>
				<view class="item" @click="goToOtherApp" style="position: relative;">
					<view style="width: 72rpx;height: 72rpx;background: #fff;position: absolute;top: -10rpx;border-radius: 16rpx;"></view>
					<view>溧水文旅</view>
				</view>
				<view class="item" @click="goToOtherApp" style="position: relative;">
					<view style="width: 72rpx;height: 72rpx;background: #fff;position: absolute;top: -10rpx;border-radius: 16rpx;"></view>
					<view>溧水区政府</view>
				</view>
				<view class="item" @click="goToOtherApp" style="position: relative;">
					<view style="width: 72rpx;height: 72rpx;background: #fff;position: absolute;top: -10rpx;border-radius: 16rpx;"></view>
					<view>溧水商务局</view>
				</view> -->
				
			</view>

			<!-- 优惠券 -->
			<view class="youhui-box">
				<view class="item-box" v-for="(item,index) in youList" :key="index" @click="quanTap(item,index)">
					<image class="wh100" :src="`${staticUrl}index/you1.png`"></image>
					<view class="left">
						<view>
							{{item.price}}
							<text>元</text>
						</view>
					</view>
					<view class="right">
						<view class="s-left">
							<text>{{item.title}}</text>
							<view>{{item.time}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 打卡活动 -->
			<view class="map-box" @click="navTap('/pages/index/dakaList')">
				<view class="titles">
					热门活动
				</view>
				<image class="map-img" :src="`../../static/dkaa.png`"></image>

				<image class="more-box" :src="`${staticUrl}mine/more.png`" @click="navTap('/pages/index/dakaList')"></image>
				<view class="map-pos daka-pos">
					<image class="map-img" :src="`${staticUrl}top_back.png`"></image>

					<view class="text-box">
						<text class="title">天生桥景区</text>
						<view class="addr-box">
							<view class="addr">
								<image :src="`${staticUrl}index/icon-map5.png`"></image>
								<text>南京市溧水区洪蓝镇天生桥路500号</text>
							</view>
							<image class="jiantou" :src="`${staticUrl}index/jiantou.png`"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 热门推荐 -->
			<view class="map-box"  @click="navTap('/pages/index/tuijian')">
				<view class="titles">
					热门推荐
				</view>
				<image class="map-img" :src="`../../static/index/cate03.png`"></image>

				<image class="more-box" :src="`${staticUrl}mine/more.png`" @click="navTap('/pages/index/tuijian')"></image>
				<view class="map-pos daka-pos">
					<image class="map-img" :src="`${staticUrl}top_back.png`"></image>

					<view class="text-box">
						<text class="title">周末一起约一场火锅宴吧！</text>
						<view class="addr-box">
							<view class="addr">
								<image :src="`${staticUrl}index/icon-map5.png`"></image>
								<text>巴邑火锅城西银泰店</text>
							</view>
							<view class="addr">
								<image :src="`${staticUrl}index/icon-map5.png`"></image>
								<text>233</text>
							</view>
							<image class="jiantou" :src="`${staticUrl}index/jiantou.png`"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 热门推荐 -->
			<view class="map-box"  @click="goToMaps">
				<view class="titles">
					便民地图
				</view>
				<image class="map-img" :src="`../../static/xinz/map.png`"></image>
			
				<image class="more-box" :src="`${staticUrl}mine/more.png`" @click="goToMaps"></image>
				<!-- <view class="map-pos daka-pos">
					<image class="map-img" :src="`${staticUrl}top_back.png`"></image>
			
					<view class="text-box">
						
						<view class="addr-box">
							
							<image class="jiantou" :src="`../../static/xinz/map.png`"></image>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 热门推荐 -->
			<view class="map-box" style="height: auto;">
				<view class="xgtitle">
					相关合作
				</view>
				<!-- <image class="map-img" :src="`../../static/xinz/map.png`"></image> -->
			
				
				<view class="xiangguan">
					<view class="menuList">
						<view @click="openCode('../../static/xinz/gou-icon.png')">
							<image :src="`../../static/xinz/gou-icon.png`" mode="aspectFill"></image>
							<view class="names">
								购在溧水
							</view>
						</view>
						<view @click="navTap('/pages/live/live')">
							<image :src="`../../static/xinz/ci-icon.png`" mode="aspectFill"></image>
							<view class="names">
								吃在溧水
							</view>
						</view>
					<!-- 	<view @click="navTap('/pages/you/you')">
							<image :src="`../../static/xinz/zhu-icon.png`" mode="aspectFill"></image>
							<view class="names">
								住在溧水
							</view>
						</view>
						<view @click="navTap('/pages/shop/shop')">
							<image :src="`../../static/xinz/you-icon.png`" mode="aspectFill"></image>
							<view class="names">
								游在溧水
							</view>
						</view>
					<view @click="navTap('/pages/eat/eat')">
						<image :src="`../../static/xinz/gou-icon.png`" mode="aspectFill"></image>
						<view class="names">
							购在溧水
						</view>
					</view>
					<view @click="navTap('/pages/live/live')">
						<image :src="`../../static/xinz/ci-icon.png`" mode="aspectFill"></image>
						<view class="names">
							吃在溧水
						</view>
					</view>
					<view @click="navTap('/pages/you/you')">
						<image :src="`../../static/xinz/zhu-icon.png`" mode="aspectFill"></image>
						<view class="names">
							住在溧水
						</view>
					</view>
					<view @click="navTap('/pages/shop/shop')">
						<image :src="`../../static/xinz/you-icon.png`" mode="aspectFill"></image>
						<view class="names">
							游在溧水
						</view>
					</view> -->
						
					</view>
				</view>
			</view>
			<uni-popup ref="alertDialog" background-color="" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="box">
						
						<image show-menu-by-longpress="true" :src="`../../static/wsy.png`" style="width: 400rpx;height: 400rpx;"></image>
						<view class="txt">
							扫码关注溧水文旅公众号
						</view>
						
					</view>
					<view class="closeicon" @click="closedDialog">
						<image show-menu-by-longpress="true" :src="`../../static/closed.png`" style="width: 96rpx;height: 96rpx;  margin: 0 auto;"></image>
					</view>
				</view>
			</uni-popup>

			<uni-popup ref="popup" background-color="transparent">
				<view class="xinxlist">
					<view style="margin: 0 auto; width: 196rpx;height: 196rpx;">
						<image :src="`${staticUrl}bjse.png`" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="nrxs">
						<view class="btitle_a">随遇而安Cafe(石鼓路店)</view>
						<view class="listtxt">
							<view class="namimgs">
								<image :src="`${staticUrl}fs.png`" style="width: 100%;height: 100%; position: absolute;left: 0;" ></image>
								<view style="position: absolute; z-index: 1;left: 20rpx;color: #FFDD57;">4.5分</view>
							</view>
						</view>
						<view class="xindizhi"  @click="daohangTap()">
							<view class="xindizhi_left">石鼓路39-1号103室（近环亚广场）</view>
							<view class="xindizhi_right">
								<image :src="`${staticUrl}dinwei.png`"></image>
								<view style="width: 100%;font-size: 20rpx;margin-left: 20rpx;">{{juli}}/千米</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabbar.vue'
	export default {
		data() {
			return {
				code:'',
				swiperList: [{
						cover_imgurl: '/static/share.jpg',
						url:'/pages/activity/activity'
					},
					{
						cover_imgurl: '/static/logo.png',
						url:''
					},
					{
						cover_imgurl: '/static/top_back.png',
						url:''
					}
				],

				id: 5,
				staticUrl:this.$base.staticUrl,
				latitude: 31.647862652276153,
				longitude: 119.02879052645874,
				juli:'',
				covers: [{
						id: 1,
						latitude: 31.647862652276153,
						longitude: 119.02479052645874,
						iconPath: '/static/index/icon-map1.png'
					},
					{
						id: 2,
						latitude: 31.647862652276153,
						longitude: 119.02579052645874,
						iconPath: '/static/index/icon-map2.png'
					},
					{
						id: 3,
						latitude: 31.647862652276153,
						longitude: 119.02779052645874,
						iconPath: '/static/index/icon-map3.png'
					},
					{
						id: 4,
						latitude: 31.647862652276153,
						longitude: 119.02679052645874,
						iconPath: '/static/index/icon-map4.png'
					}
				],

				youList: [{
					id:1,
					price: '90',
					text1: '满xxx减xx元',
					title: '无门槛消费券',
					time: '全商户可用',
					type: 0
				}],
				top:'',
			}
		},
		components: {
			Tabbar
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},

		onLoad() {
			console.log(this.staticUrl,66666666666666) 
				let that =this
				uni.getStorage({
					key: 'top',
					success: function (res) {
						that.top = res.data;
					
					}
				});
			// var data={
			// 	account:'18303552774',
			// 	password:'123654'
			// }
			//    this.$rqt.login_login(data).then(res=>{
			//            console.log(res)
			// 		uni.setStorageSync('token',res.data.userinfo.token)
			//    })
			this.login()
			this.getLocation()
		},
		methods: {
			closedDialog(){
				this.$refs.alertDialog.close()
			},
			openCode(src) {
				this.code = src
							// this.msgType = type
							this.$refs.alertDialog.open()
						},
			// 便民服务跳转其他小程序
			goToMaps(){
				uni.navigateToMiniProgram({
					// appId 要打开的小程序 appId（百度小程序则填写App Key）
					// path:打开的页面路径，如果为空则打开首页
					// extraData 需要传递给目标小程序的数据，目标小程序可在 App.vue 的 onLaunch或onShow 中获取到这份数据。
				  appId: 'wxlfeec4e32ba3b0c6',
				  path: 'pages/index/index?id=123',
				  extraData: {
				    'data1': 'test'
				  },
				  success(res) {
				    // 打开成功
				  }
				})
			},
			// 跳转到其他小程序
			goToOtherApp(){
				uni.navigateToMiniProgram({
					// appId 要打开的小程序 appId（百度小程序则填写App Key）
					// path:打开的页面路径，如果为空则打开首页
					// extraData 需要传递给目标小程序的数据，目标小程序可在 App.vue 的 onLaunch或onShow 中获取到这份数据。
				  appId: '',
				  path: 'pages/index/index?id=123',
				  extraData: {
				    'data1': 'test'
				  },
				  success(res) {
				    // 打开成功
				  }
				})
			},
			getLocation(){
			    uni.getLocation({
			        type: 'gcj02',
			        success: (res) => {
			            console.log(res)
			            // this.latitude = res.latitude.toString()
			            // this.longitude = res.longitude.toString()
			          
			        }
			    });
			},
			goToMap(){
				
				uni.switchTab({
					url:"/pages/ditu/ditu"
				})
				// uni.navigateTo({
				// 	url:"/pages/ditu/ditu"
				// })
			},
			daohangTap() {
				uni.openLocation({
					latitude: this.latitude * 1,
					longitude: this.longitude * 1,
				})
			},
			async login() {
				var email = {
					account: '18303552774',
					password: '123654'
				}
				let res = await this.$myRequest('/api/user/login', email)
			},

			markTap(e) {
			
				console.log(e)
				var a = this.covers[e.detail.markerId]
				console.log(a)
				this.$refs.popup.open('center')
				this.juli = this.getDistance(a.latitude,a.longitude)
			},
			
			// 优惠券点击
			quanTap(item,index){
				uni.navigateTo({
					url:'./quanList'
				})
			},
			
			navTap(url){
				uni.navigateTo({
					url:url
				})
				uni.switchTab({
					url:url
				})
			},
			getDistance: function(lat1, lng1) {
				console.log(lat1, lng1)
				
				var lat2 = this.latitude;
				var lng2 = this.longitude;
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				var distance = s.toFixed(2);
				return distance;
				console.log(distance)
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.popup-content{

		.box{
			width:400rpx;
			height: auto;
			padding: 80rpx;
			background:#ffffff;
			text-align: center;
			border-radius: 48rpx;
			margin-top: 20rpx;
		}
		.txt{
			font-size: 36rpx;
			margin-top: 40rpx;
		}
		.closeicon{
			margin-top: 30rpx;
			text-align: center;
		}
	}
	.bg-box {
		width: 100%;
		height: 460rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.xgtitle{
		background: url('../../static/xinz/title-bg.png') no-repeat left top;
		background-size: 296rpx 78rpx;
		line-height: 78rpx;
		height: 70rpx;
		width: 296rpx;
		left:0rpx !important;
		padding-left: 72rpx;
		font-size: 36rpx;
		    color: #ffffff;
	}
	.xiangguan{
		background: #884FFF;
		border-radius: 0rpx 40rpx 40rpx 40rpx;
		.menuList{
			background: #FAEDFC;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 8rpx solid #884FFF;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: left;
			box-sizing: border-box;
			padding-top: 40rpx;
			>view {
				width: 24%;
				height: 156rpx;
				font-size: 24rpx;
				text-align: center;
				margin-bottom: 30rpx;
				.names{
					line-height: 48rpx;
				}
				image {
					width: 108rpx;
					height: 108rpx;
				}
			}
			
			.item {
				width: 24%;
				height: 128rpx;
				padding: 20rpx 0;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				font-size: 26rpx;
				color: #FFFFFF;
				text-shadow: 0px 0px 0px #FFDD57;
			
				background: #884FFF;
				border-radius: 40rpx;
				border: 4rpx solid #FFDD57;
				box-sizing: border-box;
				margin-top: 30rpx;
			}
		}
	}
	.content-box {
		width: 690rpx;
		margin: -300rpx auto 0;
		border-radius: 48rpx;
		position: relative;
		padding-bottom: 130rpx;
		background: #FAEDFC;

		.lunbo-box {
			width: 100%;
			height:320rpx;
			overflow: hidden;
			border-radius: 48rpx;

		}

		// 地图-打卡活动-热门推荐
		.map-box {
			width: 100%;
			height: 466rpx;
			margin-top: 40rpx;
			position: relative;
			.titles{
				position: absolute;
				left: 70rpx;
				top: 20rpx;
				font-size: 36rpx;
				color: #ffffff;
				z-index: 3;
			}
			.map-img {
				width: 100%;
				height: 100%;
			}

			.more-box {
				width: 116rpx;
				height: 48rpx;
				position: absolute;
				top: 0;
				right: 6rpx;
			}

			.map-pos {
				width: 670rpx;
				height: 378rpx;
				border-radius: 40rpx;
				border: 4rpx solid #FFDD57;
				position: absolute;
				left: 50%;
				bottom: 8rpx;
				transform: translateX(-50%);
				overflow: hidden;
			}

			// 打卡活动
			.daka-pos {
				height: 365rpx;

				.text-box {
					width: 100%;
					position: absolute;
					left: 0;
					bottom: 0;
					padding: 24rpx 30rpx;
					box-sizing: border-box;

					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 40rpx;
					}

					.addr-box {
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						.addr {
							padding: 0 16rpx;
							height: 48rpx;
							background: rgba(255, 255, 255, 0.1);
							border-radius: 24rpx;
							backdrop-filter: blur(8rpx);
							display: flex;
							justify-content: space-between;
							align-items: center;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 6rpx;
							}

							font-size: 26rpx;
							color: #FFFFFF;

							text {
								margin-top: -3rpx
							}

							margin-right:30rpx;
						}

						.jiantou {
							width: 32rpx;
							height: 32rpx;
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}
		}

		// 菜单
		.menu-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 30rpx 0;
			height: 172rpx;

			>view {
				width: 24%;
				height: 172rpx;
				font-size: 24rpx;
				text-align: center;
				.names{
					line-height: 48rpx;
				}
				image {
					width: 124rpx;
					height: 124rpx;
				}
			}

			.item {
				width: 24%;
				height: 128rpx;
				padding: 20rpx 0;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				font-size: 26rpx;
				color: #FFFFFF;
				text-shadow: 0px 0px 0px #FFDD57;

				background: #884FFF;
				border-radius: 40rpx;
				border: 4rpx solid #FFDD57;
				box-sizing: border-box;
				margin-top: 30rpx;
			}
		}

		// 优惠券
		.youhui-box {
			width: 100%;

			.item-box {
				width: 100%;
				height: 184rpx;
				position: relative;
				display: flex;
				margin-bottom: 30rpx;

				image {
					position: absolute;
					left: 0;
					top: 0
				}

				.left {
					width: 182rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					font-weight: bold;
					font-size: 80rpx;
					font-family: AaHouDiHei;
					color: #FD4A5C;
					text-shadow: 0px 0px 0px #FFDD57;

					view {
						position: relative;

						text {
							display: inline-block;
							width: 40rpx;
							height: 40rpx;
							background: #FFFAE8;
							text-align: center;
							line-height: 40rpx;
							position: absolute;
							right: -6rpx;
							bottom: 20%;
							
							font-size: 26rpx;
							color: #FD4A5C;
							text-shadow: 0px 0px 0px #FFDD57;
							border-radius: 50%;
						}
					}
				}

				.right {
					flex: 1;
					height: 100%;
					position: relative;
					padding: 20rpx 30rpx 20rpx 46rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.s-left {
						width: 300rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;

						text {
							font-size: 35rpx;
							font-weight: bold;
							color: #002A3A;
							line-height: 56rpx;
						}

						view {
							font-size: 28rpx;
							font-weight: bold;
							color: #3A525E
						}
					}
				}
			}
		}
	}
	.xinxlist{
		width: 622rpx;
	   
	
	}
	.nrxs{
		width: 622rpx;
		height: 440rpx;
		background: #FFFFFF;
		border-radius: 48rpx;
		border: 4rpx solid #FFDD57;
		position: absolute;
		top: 64rpx;
		z-index: -1;
	}
	.btitle_a{
		width: 100%;
		height: 50rpx;
		margin-top:150rpx;
		text-align: center;
		float: left;
	}
	.listtxt{
		width: 100%;
		height: 50rpx;
		text-align: center;
		float: left;
		margin-top: 20rpx;
	}
	.namimgs{
		width: 138rpx;
		height: 38rpx;
		margin: 0 auto;
		position: relative;
	}
	.xindizhi{
		width: 90%;
		height: 72rpx;
		
		float: left;
		margin-top: 50rpx;
		margin-left: 5%;
	}
	.xindizhi_left{
		width: 70%;
		height: 100%;
		float: left;
		font-size: 28rpx;
	}
	.xindizhi_right{
		width: 20%;
		height: 100%;
		float: left;
		margin-left: 7%;
		border-left: 1rpx solid #ccc;
	}
	.xindizhi_right image{
		width: 48rpx;
		height: 48rpx;
		margin-left: 30rpx;
	}
</style>